<template>
	<div>
        <div class="marginLeftRight">
            <div class="my-form-container" style="height:450px">
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级</div>
                            <div class="my-form-item-value">{{ruleForm.grade}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">姓名【学号】</div>
                            <div class="my-form-item-value">{{ruleForm.studentName}}【{{ruleForm.studentCode}}】</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">异动前学员队</div>
                            <div class="my-form-item-value">{{ruleForm.originalStudentDuiShow}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">异动后学员队</div>
                            <div class="my-form-item-value">{{ruleForm.studentDuiShow}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">异动前专业</div>
                            <div class="my-form-item-value">{{ruleForm.originalSpecialtyShow}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">异动后专业</div>
                            <div class="my-form-item-value">{{ruleForm.specialtyShow}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">异动前专业班次</div>
                            <div class="my-form-item-value">{{ruleForm.originalSpecialtyClassNameShow}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">异动后专业班次</div>
                            <div class="my-form-item-value" v-if="type==1">{{ruleForm.className}}</div>
                            <el-form-item  prop="className" v-else>
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth" v-model="ruleForm.className"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">异动类型</div>
                            <div class="my-form-item-value" v-if="type==1">{{ruleForm.changeTypeShow}}</div>
                            <el-form-item  prop="changeType" v-else>
                                <div class="my-form-item-value">
                                    <el-select v-model="ruleForm.changeType" placeholder="请选择" class="inputWidth">
                                        <el-option v-for="item in diffList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">异动时间</div>
                            <div class="my-form-item-value" v-if="type==1">{{ruleForm.changeTime}}</div>
                            <el-form-item  prop="changeTime" v-else>
                                <div class="my-form-item-value">
                                    <el-date-picker class="time" v-model="ruleForm.changeTime" type="date"  value-format="yyyy-MM-dd" ></el-date-picker>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item lastOne">
                        <el-col :span="24">
                            <div class="my-form-item-label">异动原因</div>
                            <div class="my-form-item-value" v-if="type==1">{{ruleForm.reason}}</div>
                            <el-form-item  prop="reason" v-else>
                                <div class="my-form-item-value assessment-design">
                                    <el-input v-model="ruleForm.reason" type="textarea" :rows="4" style="width: 969px;" placeholder="请输入内容"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="button-group">
                <div class="" @click="save">保存</div>
                <div class="" @click="cancel">取消</div>
            </div>
        </div>
	</div>
</template>

<script>
import {studentStatusDiffInfo,studentStatusDiffUpdate} from "@/api/student";
  export default {
    data(){
        return {
            ruleForm:{
                changeTime:'',//异动时间
                changeType:'',//异动类型
                specialty:'',//异动后专业
                className:'',//异动后专业班次
                reason:'',
            },
            type:1,
            diffList:[],
            rules: {
                changeTime: [{ required: true, message: '请选择异动时间', trigger: 'change'}],
                changeType: [{ required: true, message: '请选择异动类型', trigger: 'change'}],
                className: [{ required: true, message: '请输入异动后专业班次', trigger: 'blur'}],
                reason: [{ required: true, message: '请输入异动原因', trigger: 'blur'}],
            }
        }
    },
    mounted(){
        this.type=this.$route.query.type
        //异动列表
        this.commonApi.getCommonData({code:'CHANGE_TYPE'}).then(res=>{
            this.diffList = res.data
        })
        this.getDetail(this.$route.query.id);
        this.$route.meta.title = this.$route.query.type == 1?'查看':'修改';
    },
    methods: {
        //获取详情
        async getDetail(id){
            let res = await studentStatusDiffInfo({id:id})
            if(res.code == 200){
                this.ruleForm = res.data
            }
        },
        //保存数据
        save(){
            this.$refs['ruleForm'].validate(async(valid) => {
                if (valid) {
                    let res = await studentStatusDiffUpdate(this.ruleForm);
                    if(res.code == 200){
                        this.$router.push({
                            path:'/student/studentStatusDiff/list'
                        })
                    }else{
                        this.$message.error(res.msg);
                    }
                } 
            });
        },
        //取消
        cancel(){
            this.$router.push({
                path:'/student/studentStatusDiff/list'
            })
        }
    }
  };
</script>

<style scoped lang="less" scoped>
@import "../../../styles/commonCss.less";
    /deep/.demo-ruleForm{
        .el-form-item{
            margin-bottom: 0!important;
            width: 100%;
        }
        .el-form-item__error {
            top: 75%;
            left: 42px;
        }
    }
    .lastOne{
        border:none;height:148px;
        /deep/.el-form-item__error {
            top:80%;
        }
    }
    /deep/.my-form-item-label{justify-content: center;padding: 0!important;}
	.inputWidth{width: 267px;}
    .assessment-design {
        padding: 25px 38px !important;
        .el-textarea__inner {
            resize:none
        }
        .red-tip {
            margin: 0 7px;
            display: inline-block;
            vertical-align: 105px;
        }
    }
</style>